/*
 * @Author: 张笑天
 * @Date: 2018-03-07 17:08:28
 * @Last Modified by: lyuan2018
 * @Last Modified time: 2020-09-10 09:09:53
 */
import React from 'react';
import { routerShape } from 'react-router';

import PopoverAccount from './PopoverAccount';
import PopoverDepartment from './PopoverDepartment';
import { getFlagCls } from '../../util/index';

export default class Collapse extends React.Component {
  static displayName = 'ViewCollapse';
  static contextTypes = {
    router: routerShape,
  };
  constructor(props) {
    super(props);
    this.isInstanceMounted = false;
    this.prefixClass = 'wea-email-collapse';
    this.id = `weaEmailCollapse_${Math.random().toString(36).substr(2, 6)}`;
    this.state = {
      collapsed: props.collapsed || true,
      height: 30,
    };
  }
  componentDidMount() {
    this.isInstanceMounted = true;
    const height = this.getContentHeight();
    /* eslint-disable */
    this.setState({ height });
    $(window).resize(() => {
      this.isInstanceMounted &&
        this.setState({ height: this.getContentHeight() });
    });
    /* eslint-enable */
  }
  componentWillReceiveProps(nextProps) {
    const { collapsed: _collapsed } = this.props;
    const { collapsed } = nextProps;
    collapsed !== _collapsed && this.setState({ collapsed });
  }
  componentDidUpdate() {
    const height = this.getContentHeight();
    if (this.state.height !== height) {
      /* eslint-disable */
      this.setState({ height });
      /* eslint-enable */
    }
  }
  componentWillUnmount() {
    $(window).off('resize');
    this.isInstanceMounted = false;
  }
  hide = () => {
    const { datas = [] } = this.props;
    datas.forEach((d, i) => {
      this.refs[`account${i}`] && this.refs[`account${i}`].hide();
      this.refs[`department${i}`] && this.refs[`department${i}`].hide();
    });
  };
  getContentHeight() {
    const content = $(`#${this.id} .${this.prefixClass}-content`);
    let height = 30;
    if (content && content.length > 0) {
      height = content.height();
    }
    return height;
  }
  onHeightClick = () => this.setState({ collapsed: !this.state.collapsed });
  render() {
    const { datas = [], reloadEmail } = this.props;
    const { collapsed, height } = this.state;
    return (
      <div
        id={this.id}
        className={this.prefixClass}
        style={height > 30 ? { paddingRight: 33 } : null}
      >
        {height > 30 && (
          <i
            className={`icon-coms-${collapsed ? 'down2' : 'up2'}`}
            onClick={this.onHeightClick}
          />
        )}
        <div
          className={`${this.prefixClass}-content-wrap`}
          style={{ height: collapsed ? 20 : height }}
        >
          <div className={`${this.prefixClass}-content`}>
            {datas.map((d, index) => {
              let regName = /([\s\S]*)(\<[\S\s]+\>$)/;
              let showName = d.isInternal ? (
                <a>{d.showName}</a>
              ) : regName.test(d.showName) ? (
                <a className="isExtraEmail">
                  {d.showName.match(regName) && d.showName.match(regName)[1]}
                  <span>
                    {d.showName.match(regName) && d.showName.match(regName)[2]}
                  </span>
                </a>
              ) : (
                <a className="isExtraEmail">
                  <span>{d.showName}</span>
                </a>
              );
              return (
                <span
                  className={`${this.prefixClass}-content-tag`}
                  key={`account${index}`}
                >
                  {
                    /** 所有人/部门/分部,不应该能打开用户卡片 */
                    (d.type === 'resource' && d.typeValue !== '1') ||
                    d.type === undefined ? (
                      <PopoverAccount
                        ecId={`${
                          (this && this.props && this.props.ecId) || ''
                        }_PopoverAccount@avh3fy@account${index}`}
                        ref={`account${index}`}
                        reloadEmail={reloadEmail}
                        data={d}
                      >
                        {showName}
                      </PopoverAccount>
                    ) : d.users && d.users.length > 0 ? (
                      <PopoverDepartment
                        ecId={`${
                          (this && this.props && this.props.ecId) || ''
                        }_PopoverDepartment@x4qp9i@department${index}`}
                        ref={`department${index}`}
                        data={d}
                      >
                        <a>{d.showName}</a>
                      </PopoverDepartment>
                    ) : (
                      <a>{d.showName}</a>
                    )
                  }
                  {d.op_showReadStatus ? (
                    <i
                      className={getFlagCls(d.readStatus === 1 ? 'Rr' : 'Ru')}
                    />
                  ) : null}
                </span>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}
